<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Flatkit | Web App UI - Bootstrap 4 Web App Kit with AngularJS</title>
  <meta name="description" content="Admin, Dashboard, Bootstrap, Bootstrap 4, Angular, AngularJS" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- for ios 7 style, multi-resolution icon of 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
  <link rel="apple-touch-icon" href="../assets/images/logo.png">
  <meta name="apple-mobile-web-app-title" content="Flatkit">
  <!-- for Chrome on Android, multi-resolution icon of 196x196 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" sizes="196x196" href="../assets/images/logo.png">
  
  <!-- style -->
  <link rel="stylesheet" href="assets/animate.css/animate.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/styles/app.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/styles/font.css" type="text/css" />
</head>
<body>
  <header>
      <nav class="navbar navbar-toggleable-sm navbar-md fixed-top white">
        <div class="container">
          <a data-toggle="collapse" data-target="#navbar-1" class="navbar-item pull-right hidden-md-up m-a-0 m-l">
            <i class="fa fa-bars"></i>
          </a>
          
          <!-- brand -->
          <a class="navbar-brand md" href="#home" ui-scroll-to="home">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="32" height="32">
              <path d="M 4 4 L 44 4 L 44 44 Z" fill="#a88add" />
              <path d="M 4 4 L 34 4 L 24 24 Z" fill="rgba(0,0,0,0.15)" />
              <path d="M 4 4 L 24 4 L 4  44 Z" fill="#0cc2aa" />
            </svg>

            <span class="hidden-folded inline">Flatkit</span>
          </a>
          <!-- / brand -->

          <!-- navbar collapse -->
          <div class="collapse navbar-collapse text-center white" id="navbar-1">
            <!-- link and dropdown -->
            <ul class="nav navbar-nav nav-active-border bottom b-primary ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#demos" ui-scroll-to="demos" >
                  <span class="nav-text">Demos</span> 
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#features" ui-scroll-to="features" >
                  <span class="nav-text">Features</span> 
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="http://themeforest.net/user/flatfull/portfolio?ref=flatfull">
                  <span class="nav-text">Support</span> 
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="angular/#/app/docs">
                  <span class="nav-text">Documentation</span> 
                </a>
              </li>
            </ul>
            <!-- / link and dropdown -->
          </div>
          <!-- / navbar collapse -->

          <!-- nabar right -->
          <ul class="nav navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="http://themeforest.net/user/flatfull/portfolio?ref=flatfull">
                <span class="btn btn-sm rounded accent text-u-c _700">
                  Get It
                </span>
              </a>
            </li>
          </ul>
          <!-- / navbar right -->
        </div>
      </nav>
  </header>
  <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="30" height="30" style="position:fixed; z-index:0; left:50%; top: 20%" class="animated fadeInDownBig">
        <path d="M 48 0 L 24 48 L 0 0 Z" fill="rgba(0,0,0,0.05)" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="10" height="10" style="position:fixed; z-index:0; left:49%; top: 15%" class="animated fadeInDown">
        <path d="M 48 0 L 24 48 L 0 0 Z" fill="#a88add" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="5" height="5" style="position:fixed; z-index:0; left:30%; top: 0%" class="animated fadeInDown">
        <path d="M 48 0 L 24 48 L 0 0 Z" fill="#a88add" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20" style="position:fixed; z-index:0; right:5%; top: 30%" class="animated fadeInDown">
        <path d="M 48 0 L 24 48 L 0 0 Z" fill="#0cc2aa" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="15" height="15" style="position:fixed; z-index:0; left:34.5%; top: 55%" class="animated fadeIn">
        <path d="M 0 48 L 24 0 L 48 48 Z" fill="#fcc100" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="200" height="200" style="position:fixed; z-index:0; right:20%; top: 70%" class="animated fadeInUp">
        <path d="M 0 48 L 24 0 L 48 48 Z" fill="rgba(252,193,0,0.1)" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="120" height="120" style="position:fixed; z-index:0; left:0%; top: 30%" class="animated fadeInLeftBig">
        <path d="M 0 48 L 48 24 L 0 0 Z" fill="rgba(0,0,0,0.03)" />
      </svg>
  </div>
  <div class="page-content" id="home">
    <div class="h-v white row-col">
      <div class="row-cell v-b">
        <div class="container p-y-lg pos-rlt">
          <h1 class="display-3 _700 l-s-n-3x m-t-lg m-b-md">It's time for <span class="text-primary">amazing</span> projects</h1>
          <h5 class="text-muted m-b-lg">We create ui kit for your next <span class="label accent">HTML5</span> application - <span class="label accent">P.O.S.T.E.D BY G.A.N.J.A.P.A.R.K.E.R</span></h5>
          <a href="#demos" ui-scroll-to="demos" class="btn btn-lg btn-outline b-primary text-primary b-2x">See the demos</a>
        </div>
      </div>
    </div>
    <div class="p-y-lg" id="demos">
      <div class="container p-y-lg text-primary-hover">
        <h2 class=" _700 l-s-n-1x m-b-md">We love <span class="text-primary">variant</span></h2>
        <h5 class="text-muted m-b-lg">Choose what you like</h5>
        <div class="row m-y-lg">
          <div class="col-md-6 col-lg-4">
            <div class="box white box-shadow-z3 text-center">
                <a href="angular">
                  <img class="img-responsive b-b m-b" src="assets/images/layout.png" alt="default">
                  <span class="_800 p-a block h4 m-a-0">Default</span>
                </a>
                <div class="box-body">
                  <p>
                    <a href="angular?bg=bg">Light</a>, 
                    <a href="angular?bg=grey">Grey</a>, 
                    <a href="angular?bg=dark">Dark</a>, 
                    <a href="angular?bg=black">Black</a>
                  </p>
                </div>
                <div class="row-col b-t">
                  <a href="angular" class="row-cell _500 p-a b-r">Angular</a>
                  <a href="html/dashboard.html" class="row-cell _500 p-a">Html</a>
                </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="box white box-shadow-z3 text-center">
                <a href="angular/?layout=0">
                  <img class="img-responsive b-b m-b" src="assets/images/layout.0.png" alt="zero">
                  <span class="_800 p-a block h4 m-a-0">Zero</span>
                </a>
                <div class="box-body">
                  <p>
                    <a href="angular?layout=0&bg=bg">Light</a>, 
                    <a href="angular?layout=0&bg=grey">Grey</a>, 
                    <a href="angular?layout=0&bg=dark">Dark</a>, 
                    <a href="angular?layout=0&bg=black">Black</a>
                  </p>
                </div>
                <div class="row-col b-t">
                  <a href="angular/?layout=0" class="row-cell _500 p-a b-r">Angular</a>
                  <a href="html/dashboard.0.html" class="row-cell _500 p-a">Html</a>
                </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="box white box-shadow-z3 text-center">
                <a href="angular/?layout=1">
                  <img class="img-responsive b-b m-b" src="assets/images/layout.1.png" alt="zero">
                  <span class="_800 p-a block h4 m-a-0">One</span>
                </a>
                <div class="box-body">
                  <p>
                    <a href="angular?layout=1&bg=bg">Light</a>, 
                    <a href="angular?layout=1&bg=grey">Grey</a>, 
                    <a href="angular?layout=1&bg=dark">Dark</a>, 
                    <a href="angular?layout=1&bg=black">Black</a>
                  </p>
                </div>
                <div class="row-col b-t">
                  <a href="angular/?layout=1" class="row-cell _500 p-a b-r">Angular</a>
                  <a href="html/dashboard.1.html" class="row-cell _500 p-a">Html</a>
                </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="box white box-shadow-z3 text-center">
                <a href="angular/?layout=2">
                  <img class="img-responsive b-b m-b" src="assets/images/layout.2.png" alt="zero">
                  <span class="_800 p-a block h4 m-a-0">Two</span>
                </a>
                <div class="box-body">
                  <p>
                    <a href="angular?layout=2&bg=bg">Light</a>, 
                    <a href="angular?layout=2&bg=grey">Grey</a>, 
                    <a href="angular?layout=2&bg=dark">Dark</a>, 
                    <a href="angular?layout=2&bg=black">Black</a>
                  </p>
                </div>
                <div class="row-col b-t">
                  <a href="angular/?layout=2" class="row-cell _500 p-a b-r">Angular</a>
                  <a href="html/dashboard.2.html" class="row-cell _500 p-a">Html</a>
                </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="box white box-shadow-z3 text-center">
                <a href="angular/?layout=3">
                  <img class="img-responsive b-b m-b" src="assets/images/layout.3.png" alt="zero">
                  <span class="_800 p-a block h4 m-a-0">Three</span>
                </a>
                <div class="box-body">
                  <p>
                    <a href="angular?layout=3&bg=bg">Light</a>, 
                    <a href="angular?layout=3&bg=grey">Grey</a>, 
                    <a href="angular?layout=3&bg=dark">Dark</a>, 
                    <a href="angular?layout=3&bg=black">Black</a>
                  </p>
                </div>
                <div class="row-col b-t">
                  <a href="angular/?layout=3" class="row-cell _500 p-a b-r">Angular</a>
                  <a href="html/dashboard.3.html" class="row-cell _500 p-a">Html</a>
                </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="box white box-shadow-z3 text-center">
                <a href="angular/?layout=4">
                  <img class="img-responsive b-b m-b" src="assets/images/layout.4.png" alt="zero">
                  <span class="_800 p-a block h4 m-a-0">Four</span>
                </a>
                <div class="box-body">
                  <p>
                    <a href="angular?layout=4&bg=bg">Light</a>, 
                    <a href="angular?layout=4&bg=grey">Grey</a>, 
                    <a href="angular?layout=4&bg=dark">Dark</a>, 
                    <a href="angular?layout=4&bg=black">Black</a>
                  </p>
                </div>
                <div class="row-col b-t">
                  <a href="angular/?layout=4" class="row-cell _500 p-a b-r">Angular</a>
                  <a href="html/dashboard.4.html" class="row-cell _500 p-a">Html</a>
                </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="box white box-shadow-z3 text-center">
                <a href="angular/?layout=5">
                  <img class="img-responsive b-b m-b" src="assets/images/layout.5.png" alt="zero">
                  <span class="_800 p-a block h4 m-a-0">Five</span>
                </a>
                <div class="box-body">
                  <p>
                    <a href="angular?layout=5&bg=bg">Light</a>, 
                    <a href="angular?layout=5&bg=grey">Grey</a>, 
                    <a href="angular?layout=5&bg=dark">Dark</a>, 
                    <a href="angular?layout=5&bg=black">Black</a>
                  </p>
                </div>
                <div class="row-col b-t">
                  <a href="angular/?layout=5" class="row-cell _500 p-a b-r">Angular</a>
                  <a href="html/dashboard.5.html" class="row-cell _500 p-a">Html</a>
                </div>
            </div>
          </div>
        </div>
        <h5 class="m-y-lg text-muted text-center">More demos with regular updates</h5>
      </div>
    </div>
    <div class="pos-rlt" id="features">
      <div class="h-v-5 row-col text-center">
        <div class="col-sm-6 deep-purple v-m">
          <div class="p-a-lg">
            <h2 class=" _700 l-s-n-1x m-y m-b-md">Bootstrap <span class="label yellow">4</span></h2>
            <p class="h5 text-muted l-h">The most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
          </div>
        </div>
        <div class="col-sm-6 red-700 v-m">
          <div class="p-a-lg">
            <h2 class=" _700 l-s-n-1x m-y m-b-md">AngularJS</h2>
            <p class="h5 text-muted l-h">AngularJS is a toolset for building the framework most suited to your application development.</p>
          </div>
        </div>
      </div>
      <div class="h-v-5 row-col text-center">
        <div class="col-sm-6 primary v-m">
          <div class="p-a-lg">
            <h2 class=" _700 l-s-n-1x m-y m-b-md">Tools</h2>
            <p class="h5 text-muted l-h">Grunt, Bower, Sass, Git, we made it easy for development. you can use hundreds of Grunt plugins to faster your app.</p>
          </div>
        </div>
        <div class="col-sm-6 warn v-m">
          <div class="p-a-lg">
            <h2 class=" _700 l-s-n-1x m-y m-b-md">Variant</h2>
            <p class="h5 l-h">Unlimited colors, You can apply any colors on any blocks, even on the light, grey, dark, black themes.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="black pos-rlt">
    <div class="footer dk">
      <div class="text-center container p-y-lg">
        <div class="clearfix text-lg m-t">
          <strong>Flatkit</strong> web ui kit for your next project
        </div>
        <div class="nav justify-content-center m-y text-primary-hover">
          <a class="nav-link" href="#demos" ui-scroll-to="demos" >
            <span class="nav-text">Demos</span>
          </a>
          <a class="nav-link" href="#features" ui-scroll-to="features" >
            <span class="nav-text">Features</span> 
          </a>
          <a class="nav-link" href="http://themeforest.net/user/flatfull/portfolio?ref=flatfull">
            <span class="nav-text">Support</span> 
          </a>
          <a class="nav-link" href="angular/#/app/docs">
            <span class="nav-text">Documentation</span> 
          </a>
        </div>
        <div class="block clearfix">
          <a href class="btn btn-icon btn-social rounded btn-sm m-r">
            <i class="fa fa-twitter"></i>
            <i class="fa fa-twitter light-blue"></i>
          </a>
          <a href="https://dribbble.com/flatfull" class="btn btn-icon btn-social rounded btn-sm">
            <i class="fa fa-dribbble"></i>
            <i class="fa fa-dribbble pink"></i>
          </a>
        </div>
      </div>
      <div class="b b-b"></div>
      <div class="p-a-md">
        <div class="row footer-bottom">
          <div class="col-sm-8">
            <small class="text-muted">&copy; Copyright 2017. All rights reserved.</small>
          </div>
          <div class="col-sm-4">
            <div class="text-sm-right text-xs-left">
              <strong>Flatkit</strong>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer> 
  <script src="libs/jquery/jquery/dist/jquery.js"></script>
  <script src="libs/jquery/tether/dist/js/tether.min.js"></script>
  <script src="libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
  <script src="html/scripts/ui-scroll-to.js"></script>
</body>
</html>
